<template>
  <div>
    <div class="container">
      <div class="nav">
        <div>
          <a href="javascript:;" @click="$router.back()"></a>
        </div>
        <div>
          <span>新闻正闻</span>
        </div>
        <div @click="subnav = !subnav">
          <i>&nbsp;&nbsp;&nbsp;&nbsp;</i>
          <div class="subnav" v-show="subnav">
            <router-link to="/" tag="a">首页</router-link>
            <router-link to="/news" tag="a">资讯</router-link>
            <router-link to="/video" tag="a">视频</router-link>
            <router-link to="/seek" tag="a">找车</router-link>
            <router-link to="/plaint" tag="a">汽车投诉</router-link>
          </div>
        </div>
      </div>

      <div class="main" v-if="allData" :style="{ height: mainH }">
        <h1>{{ allData.title }}</h1>
        <div class="active">
          <div class="img">
            <img :src="allData.author.src" alt="" />
          </div>
          <div class="txt">
            <h5>{{ allData.author.name }}</h5>
            <span>{{ allData.author.date }}</span>
          </div>
        </div>
        <p v-for="(val, ind) in allData.txt" :key="ind" v-html="val"></p>
      </div>
      <div class="ani" @click="auto" v-show="ani">
        <div class="mask" @click="auto"></div>
      </div>
      <div class="topbar" ref="topbar" @click="sor" v-show="false"></div>
      <div class="column">
        <h2>相关推荐</h2>
      </div>

      
      <div class="new">
        <router-link
          tag="div"
          :to="{ path: '/topic', query: { ind: item.id } }"
          v-for="(item, index) in carNews"
          :key="index"
          
        >
          <div class="txt">
            <h4>{{ item.title }}</h4>
            <span>{{ item.date }} </span>
          </div>
          <div class="img">
            <img :src="item.src" alt="" />
          </div>
        </router-link>
      </div>

      <div class="column">
        <h2>评论</h2>
      </div>
      <!-- <router-link to="/login" tag="div" class="loaded" v-show="login">登录后可发表评论</router-link> -->
      <div class="sending" >
        <input type="text" v-model="send" placeholder="留下您的精彩评论">
        <span @click="runSend">发送</span>
      </div>

      <div class="comment" v-for="(item,index) in comment" :key="index">
        <div class="comTop">
          <div class="author">
            <img :src="item.author" alt="">
          </div>
          <div class="info">
            <h3>{{item.name}}</h3>
            <p>{{item.txt}}</p>
          </div>
        </div>
        <div class="comFoot">
          <div class="date">
            {{item.date}}
          </div>
          <div class="good iconfont icon-dianzan" @click="go(index)" ref="good">
            {{item.num}}
          </div>
        </div>
      </div>
      <div class="footer">
        <p>您的投诉建议</p>
        <p>Copyright©2019 汽车消费网 315che.com</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getJsonTopic } from "../api/topic";

export default {
  props: ["carNews","login"],
  data() {
    return {
      allData: null,
      dataId: null,
      subnav: false,
      mainH: "767px",
      ani: true,
      send:"",
      comment:[
        {
          name:'上善若水',
          author:'http://img.315che.com/img4/c/Supl/oadS/2022/V10V/30Se/2ce4/176V/4187/V447/3Va8/50Vf/429b/601b/4ccL/U750/U0.jpg',
          txt:'价格太贵，不发优惠卷很难让人心动',
          num:26,
          date:'9-17'
        },
        {
          name:'花开富贵',
          author:'http://img.315che.com/img4/c/Supl/oadS/2022/V10V/30Sa/a9f5/39eV/6091/V4f8/eV8e/e0V8/bfbc/b977/d88O/U750/U0.jpg',
          txt:'5块钱的优惠券有球用，怎么着也得20吧',
          num:67,
          date:'9-26'
        },
      ]
    };
  },
  methods: {
    getData() {
      this.dataId = this.$route.query.ind;
    //   console.log(this.dataId);
    console.log('一次');
      getJsonTopic().then((data) => {
        this.allData = data[this.dataId];
        // console.log(this.allData.title);
      });
    },
    sro() {
      window.scroll(0, 0);
    },
    auto() {
      this.mainH = "auto";
      this.ani = false;
    },
    sor() {
      window.scroll(0, 0);
    },
    go(ind){
      if(this.$refs.good[ind].classList.contains('rig')){
        this.comment[ind].num = this.comment[ind].num-1;
      }else{
        this.comment[ind].num = this.comment[ind].num+1;

      }
      this.$refs.good[ind].classList.toggle('rig')
    },
    runSend(){
      if(this.send == ""){
        return
      }
      this.comment.push(
        {
        name:'A678D',
        author:'http://img.315che.com/img4/c/Supl/oadS/2022/V10V/30Sa/a9f5/39eV/6091/V4f8/eV8e/e0V8/bfbc/b977/d88O/U750/U0.jpg',
        txt:this.send,
        num:0,
        date:'11-20'
      })
    }

  },
  created() {
    this.getData();
    this.$emit("car-show", false);
    this.sro();
  },
  mounted() {
    
  }


};
</script>

<style lang="scss" scoped>
.container {
  transition: all 1s linear;
}
.nav {
  height: 44px;
  background-color: #2070e0;
  display: flex;
  align-items: center;

  & > div {
    &:nth-child(1) {
      text-align: left;
      flex: 1;
    }

    &:nth-child(2) {
      text-align: center;
      flex: 1;
    }

    &:nth-child(3) {
      text-align: right;
      flex: 1;
      padding-right: 10px;
      position: relative;
      i {
        display: block;
        float: right;
      }
      .subnav {
        width: 100px;
        height: 170px;
        padding: 6px;
        border-radius: 4px;
        position: absolute;
        top: 35px;
        left: 12px;
        background: rgba(0, 0, 0, 0.8);
        z-index: 9;

        a {
          width: 100px;
          height: 18px;
          padding: 8px 0;
          text-align: center;
          background-image: none;
          color: #fff;
        }

        &::before {
          content: "";
          display: block;
          position: absolute;
          top: -17px;
          left: 80px;
          border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
          border-width: 9px;
          border-style: dashed dashed solid dashed;
        }
      }
    }
  }

  div {
    a {
      display: block;
      width: 40px;
      height: 40px;
      background-image: url("../assets/img/icons1.png");
      background-position: -82px -32px;
      background-size: 400px auto;
    }

    span {
      color: #fff;
      font-size: 16px;
    }

    i {
      width: 15px;
      height: 18px;
      background-image: url("../assets/img/m-icons.png");
      background-position: -211px 0px;
      background-size: 300px auto;
      margin-right: 15px;
    }
  }
}

.main {
  padding: 20px;
  // height: 767px;
  overflow: hidden;
  h1 {
    color: #333;
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 15px;
  }

  .active {
    height: 35px;
    display: flex;
    padding-bottom: 15px;
  }

  p {
    line-height: 28px;
    font-size: 18px;
    padding: 10px 0;
    // text-indent: 38px;
    text-align: justify;
    letter-spacing: -0.2px;
  }
}

.ani {
  position: relative;
  padding: 20px 0;
  .mask {
    height: 60px;
    width: 100%;
    position: absolute;
    top: -50px;
    background-image: linear-gradient(-180deg, hsla(0, 0%, 100%, 0), #fff);
    &::after {
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      background: url("../assets/img/icon-db-arrow-.png") no-repeat;
      background-size: 100%;
      position: absolute;
      right: 50%;
      margin-right: -8px;
      animation: box 0.8s ease infinite;
    }
  }
}
@keyframes box {
  0% {
    top: 35px;
  }
  70% {
    top: 0px;
  }
  100% {
    top: 35px;
  }
}
.topbar {
  width: 50px;
  height: 50px;
  position: fixed;
  top: 70%;
  right: 10px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 2px 2px 8px rgb(0 0 0 / 20%), -2px -2px 8px rgb(0 0 0 / 20%);
  &::after {
    content: "";
    display: block;
    width: 18px;
    height: 10px;
    position: absolute;
    top: 17px;
    left: 15px;
    background-image: url("../assets/img/m-icons.png");
    background-position: -121px -57px;
    background-size: 300px auto;
  }
}
.active {
  .img {
    margin-right: 10px;

    img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
    }
  }

  .txt {
    h5 {
      color: #333;
      font-size: 16px;
    }

    span {
      color: #999;
      font-size: 12px;
    }
  }
}

.column {
  h2 {
    color: #333;
    font-size: 22px;
    border-bottom: 20px;
    font-weight: 700;
    padding-left: 20px;
  }
}
.sending{
  width: 100%;
  padding: 20px 15px;
  background-color: #eee;
  display: flex;
  position: fixed;
  bottom: 0px;
  left: 0px;
  input{
    width: 70%;
    border: 1px solid #2070e0;
    outline: none;
    border-radius: 15px;
    padding-left: 15px;
  }
  span{
    content: '发送';
    color: #fff;
    background-color: #2070e0;
    padding: 8px 6px;
    border-radius: 8px;
    margin-left: 10px;
  }
}
.new {
  padding: 15px 0;

  & > div {
    display: flex;
    padding: 8px 20px;
    justify-content: space-between;
    margin-bottom: 15px;

    .img {
      flex: 1;
      margin-left: 10px;

      img {
      }
    }

    .txt {
      display: flex;
      flex: 2;
      flex-direction: column;
      justify-content: space-around;

      h4 {
        height: 42px;
        line-height: 20px;
        font-size: 18px;
        color: #333;
        margin-bottom: 15px;
      }

      span {
        font-size: 12px;
        color: #999;
      }
    }
  }
}

.loaded {
  font-size: 15px;
  color: #666;
  text-align: center;
  margin: 20px 0;
}

.comment{
  padding: 20px;
  .comTop{
    display: flex;
    height: 60px;
    .author{
      img{
        width: 40px;
        height: 40px;
        margin: auto;
      }
    }
    .info{
      padding-left: 10px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
        h3{
          color: #333;
          font-size: 13px;
          font-weight: 700;
          padding-bottom: 10px;
        }
        p{
          color: #333;
          font-size: 12px;
        }
    }
  }
  .comFoot{
    display: flex;
    justify-content: space-between;
    padding-left: 50px;
    .date{
      color: #999;
      font-size: 12px;
    }
    .good{
      color: #666;
      &::before{
        content: "\e8c3";
        margin-right: 5px;
      }
    }
    .rig{
      color: red;
    }
  }
}


.footer {
  height: 44px;
  padding: 25px 20px;
  padding-bottom: 100px;

  p {
    color: #333;
    font-size: 14px;
    text-align: center;

    &:first-of-type {
      padding-bottom: 10px;

      &::before {
        display: inline-block;
        width: 18px;
        height: 14px;
        content: "";
        background-image: url("../assets/img/m-icons.png");
        background-position: -601px 0px;
        background-size: 230px auto;
        margin-right: 3px;
      }
    }
  }
}
</style>